<template>
  <div>
    <!-- 图书订单 -->
    <!-- 表单 -->
    <el-form ref="form" :model="form" label-width="80px" :inline="true">
      <el-form-item label="订单状态">
        <el-select v-model="form.status" placeholder="请选择">
          <el-option
            :label="item"
            :value="item"
            v-for="(item, index) in orderStutas"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="支付类型">
        <el-select v-model="form.pay" placeholder="请选择">
          <el-option
            :label="item"
            :value="item"
            v-for="(item, index) in payType"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="下单时间">
        <el-date-picker
          type="date"
          placeholder="开始日期一结束日期"
          v-model="form.date1"
          style="width: 300px;"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="商品名称">
        <el-input
          v-model="form.shopName"
          placeholder="请输入商品名称关键字"
        ></el-input>
      </el-form-item>
      <el-form-item label="订单编号">
        <el-input
          v-model="form.orderNum"
          placeholder="请输入订单编号关键字"
        ></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="form.tel" placeholder="请输入买家手机号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="onSearch">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-refresh-left" @click="cz">重置</el-button>
      </el-form-item>
    </el-form>
    <p>
      <el-button type="primary">批量导出</el-button>
      <el-button type="primary">批量导入</el-button>
      <el-button type="primary">批量发货</el-button>
      <el-button type="primary">查看报表</el-button>
    </p>
    <!-- 表格数据 -->
    <p>
      <el-table :data="getList" stripe border style="width: 100%">
        <el-table-column
          prop="order_number"
          label="订单编号"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="shop_name"
          label="商品名称"
          width="180"
        ></el-table-column>
        <el-table-column prop="order_price" label="订单金额"></el-table-column>
        <el-table-column label="订单状态">
          <template slot-scope="scope">
            <span v-show="scope.row.order_status == 0">待支付</span>
            <span v-show="scope.row.order_status == 1">已支付</span>
            <span v-show="scope.row.order_status == 2">已关闭</span>
          </template>
        </el-table-column>
        <el-table-column label="支付类型">
          <template slot-scope="scope">
            <span v-show="scope.row.pay_type == 0">在线支付</span>
            <span v-show="scope.row.pay_type == 1">已支付</span>
            <span v-show="scope.row.pay_type == 2">已关闭</span>
          </template>
        </el-table-column>
        <el-table-column prop="nickname" label="买家"></el-table-column>
        <el-table-column prop="mobile" label="买家手机号"></el-table-column>
        <el-table-column label="下单时间" width="200px">
          <template slot-scope="scope">{{
            scope.row.created_at | filtimes
          }}</template>
        </el-table-column>
        <el-table-column label="更新时间" width="200px">
          <template slot-scope="scope">{{
            scope.row.updated_at | filtimes
          }}</template>
        </el-table-column>
        <el-table-column label="操作">
          <el-link type="primary">订单按钮</el-link>
          <br />
          <el-link type="primary">取消订单</el-link>
          <br />
          <el-link type="primary">改价</el-link>
        </el-table-column>
      </el-table>
    </p>
    <!-- 分页 -->
    <p style="text-align: right">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[6, 8, 10, 15]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="list.length"
      ></el-pagination>
    </p>
  </div>
</template>

<script>
import { getFinance } from "../../api/api6";
export default {
  data() {
    return {
      orderStutas: [
        "待支付",
        "拼团中",
        "已完成",
        "代发货",
        "退款成功",
        "退款中",
        "退款申请中",
        "已关闭"
      ],
      payType: [
        "微信",
        "支付宝",
        "虚拟支付宝",
        "苹果支付",
        "赠送",
        "优惠券支付",
        "线下支付"
      ],
      form: {
        status: "",
        pay: "",
        shopName: "",
        orderNum: "",
        tel: ""
      },
      // 每页几条数据
      pageSize: 4,
      // 第几页
      pageNum: 1,
      list: [],
      listcopy: []
    };
  },
  mounted() {
    getFinance().then(res => {
      console.log(res);
      this.list = res.data.list;
      this.listcopy = res.data.list;
    });
  },
  filters: {
    filtimes(val) {
      var data = new Date(val * 1000);
      var y = data.getFullYear();
      var m = data.getMonth() + 1;
      var r = data.getDate();
      var h = data.getHours();
      var f = data.getMinutes();
      var s = data.getSeconds();
      return `${y}/${m}/${r} ${h}:${f}:${s}`;
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(val);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(val);
      this.pageNum = val;
    },
    // 搜索
    onSearch() {
      this.list = this.listcopy.filter(item => {
        return (
          item.order_number.includes(this.form.orderNum) &&
          item.shop_name.includes(this.form.shopName) &&
          item.mobile.includes(this.form.tel)
        );
      });
    },
    cz() {
      this.list = this.listcopy;
    }
  },

  computed: {
    getList() {
      return this.list.slice(
        (this.pageNum - 1) * this.pageSize,
        this.pageNum * this.pageSize
      );
    }
  }
};
</script>

<style lang="scss">
.title {
  background-color: #fff;
  border-bottom: 1px solid #cccccc;
  box-sizing: border-box;
  padding: 10px 20px;
  margin-bottom: 30px;
  // text-align: right;
}
.el-table th,
.el-table tr {
  background-color: #eeeeee;
  color: black;
}
</style>
